<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="UTF-8">
    <title>Title</title>



</head>
    <script src="/static/js/jquery-3.5.0.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <script src="/static/js/d3.v5.js"></script>
    <script src="js/newScatter.js"></script>
    <script src="js/chart.js"></script>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">

<body>
    <div  class="container-fluid" style="width: 1220px;height: 1000px;margin: 0 auto;background: #E6E6FA;">
        <div class="row" >
          <div class="col-md-1"  style="width: 1210px;height: 80px; overflow: auto ;margin: 5px;background: #FFFFFF;text-align:center">
              <h1>虚分类可视化视图</h1>
          </div>
        </div>
        <div class="row">
          <div class="col-md-3">
             <div class="row">
                 <div calss = "col-md-3" style="width: 300px;height: 400px; overflow: auto ;background: #FFFFFF;margin-left: 5px;">
                     类别
                 </div>
                  <div calss = "col-md-3" style="width: 300px;height: 195px; overflow: auto ;background: #FFFFFF;margin-left: 5px;margin-top: 5px;">
                     混淆
                 </div>
             </div>
          </div>

            <div class="col-md-3" style="width: 600px;height: 600px; overflow: auto ;background: #FFFFFF;margin-left: 5px;">
                 投影
             </div>

            <div class="col-md-3" style="width: 300px;height: 600px; overflow: auto ;background: #FFFFFF;margin-left: 5px;">
                 细节
            </div>
        </div>

        <div class="row">
          <div class="col-md-6" style="width: 1210px;height: 300px; overflow: auto ;background: #FFFFFF;margin-left: 5px;margin-right: 5px;margin-top: 5px;" >
              <h2>迭代</h2>
          </div>
        </div>

    </div>
</body>
</html>